<div class="container">
    <div class="row" id="bar">
        <div class="col-md-6">
            <article>
                <h2 class="tutorial__heading">Bar Chart</h2>
                <div class="js-bar-chart-tooltip-container card--chart"></div>
            </article>
        </div>
        <div class="col-md-6">
            <article>
                <h2 class="tutorial__heading">Horizontal Bar Chart</h2>
                <div class="js-horizontal-bar-chart-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" id="line">
            <article>
                <h2 class="tutorial__heading">Line Chart</h2>
                <div class="britechart js-line-chart-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6" id="donut">
            <article>
                <h2 class="tutorial__heading">Donut Chart</h2>
                <div class="card--chart">
                    <div class="js-donut-chart-container donut-chart-container"></div>
                    <div class="js-legend-chart-container legend-chart-container"></div>
                </div>
            </article>
        </div>
        <div class="col-md-6">
            <article id="brush">
                <h2 class="tutorial__heading">Brush Chart</h2>
                <div class="js-brush-chart-container card--chart"></div>
                <p class="js-date-range date-range is-hidden">Selected from <span class="js-start-date"></span> to <span class="js-end-date"></span></p>
            </article>
            <article id="step">
                <h2 class="tutorial__heading">Step Chart</h2>
                <div class="js-step-chart-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" id="stacked-area">
            <article>
                <h2 class="tutorial__heading">Stacked Area Chart</h2>
                <div class="britechart js-stacked-area-chart-tooltip-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <article>
                <h2 class="tutorial__heading">Grouped Bar Chart with Tooltip</h2>
                <div class="britechart js-grouped-bar-chart-tooltip-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <article>
                <h2 class="tutorial__heading">Horizontal Stacked Bar Chart</h2>
                <div class="britechart js-stacked-bar-chart-tooltip-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <article>
                <h2 class="tutorial__heading">Scatter Plot</h2>
                <div class="britechart js-scatter-plot-chart-tooltip-container card--chart"></div>
            </article>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <article>
                <h2 class="tutorial__heading">Bullet Chart</h2>
                <div class="britechart js-bullet-chart-container card--chart"></div>
            </article>
        </div>
    </div>
</div>
